Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 카카오 소셜 로그인 로직 구현 및 통신 #35

Merged
merged 27 commits into from
Feb 18, 2025
Merged

feat: 카카오 소셜 로그인 로직 구현 및 통신 #35

merged 27 commits into from
Feb 18, 2025

Conversation

gkfla668
Copy link
Member

@gkfla668 gkfla668 commented Feb 7, 2025 •
edited
Loading

⚾️ Related Issues

📝 Task Details

  • tanstack/react-query 설치 및 적용
  • 카카오 로그인 페이지로 리다이렉트
  • 서버에게 POTS로 code 전송
  • 서버에서 토큰 받기 성공
  • 카카오 로그인 처리 시 로딩 애니메이션 추가 (공통 컴포넌트 사용)
  • 카카오 로그인 성공 시 토스트 컴포넌트 추가
  • ESLint 오류 + pre-push 훅 오류 수정
  • 프록시 설정

📂 References

  • screenshots, GIFs, etc.

💕 Review Requirements

  • 서버와 cors 문제로 잠시 쉬는중😴
  • 로컬에서만 테스트해 본 거라서, 서버 배포된 다음에 다시 테스트 해본 후 머지하는 것이 나을 것 같습니다! -> 🆗 통신 성공

논의 사항

  • 토큰을 로컬스토리지에서 관리할지 쿠키로 관리할지
    ➡️ 일단 지금은 accessToken만 로컬에서 관리하고, 이후 url이 새로고침 될 때마다 refresh token을 request에 담아 새로운 accessToken을 발급 받고, 발급 받은 accessToken은 js private variable에 저장하는 방식으로 수정하려고 합니다!

이런 방식을 사용하는 경우, refresh token이 CSRF에 의해 사용된다 하더라도 공격자는 accessToken을 알 수 없다고 합니다

@gkfla668 gkfla668 self-assigned this Feb 7, 2025
@gkfla668 gkfla668 added the ✨ Feature 기능 개발 label Feb 7, 2025
@gkfla668 gkfla668 added the 📭 API API 서버 통신 label Feb 13, 2025
gkfla668 and others added 13 commits February 13, 2025 21:39
@gkfla668
feat: '카카오톡으로 시작하기' 버튼 컴포넌트
f8ec530
@gkfla668
feat: 온보딩 화면 컴포넌트
5afed3b
@gkfla668
design: framer motion 컴포넌트 분리 및 적용
987d55d
@gkfla668
refactor: 로딩 컴포넌트 적용
f69aad5
@gkfla668
feat: home에서 로그인 페이지 접근 로직 추가
14cf0da
@gkfla668
Merge branch 'dev' into design/login
be68d50
@gkfla668
fix: 설정 페이지 카카오 svg 파일 지워버려서 다시 추가
1d0d3e9
@gkfla668
Merge branch 'design/login' of https://github.com/dnd-side-project/dn…
0609d62 
…d-12th-5-frontend into design/login
@gkfla668
feat: 로그인 페이지 내 온보딩 화면 조건부 렌더링
67d2e7b 
- framer motion 적용
@gkfla668
Merge branch 'dev' of https://github.com/dnd-side-project/dnd-12th-5-…
9e6f658 
…frontend into feat/login
@gkfla668
Merge branch 'design/login' of https://github.com/dnd-side-project/dn…
357f95a 
…d-12th-5-frontend into feat/login
@gkfla668
feat: 프록시 설정
eb2684e
@gkfla668
feat: 리다이렉트 페이지지 경로 수정, 상대 경로 설정
72046c3
@gkfla668 gkfla668 added the 🎨 Html & CSS 마크업 & 스타일링 label Feb 15, 2025
@gkfla668 gkfla668 removed the 🎨 Html & CSS 마크업 & 스타일링 label Feb 15, 2025
@gkfla668 gkfla668 marked this pull request as ready for review February 18, 2025 08:11
@gkfla668 gkfla668 requested a review from xxxjinn February 18, 2025 08:11
@xxxjinn
Copy link
Collaborator

xxxjinn commented Feb 18, 2025

토큰을 로컬스토리지에서 관리할지 쿠키로 관리할지
➡️ 일단 지금은 accessToken만 로컬에서 관리하고, 이후 url이 새로고침 될 때마다 refresh token을 request에 담아 새로운 accessToken을 발급 받고, 발급 받은 accessToken은 js private variable에 저장하는 방식으로 수정하려고 합니다!
이런 방식을 사용하는 경우, refresh token이 CSRF에 의해 사용된다 하더라도 공격자는 accessToken을 알 수 없다고 합니다

헉 너무 좋은 것 같아용

xxxjinn
xxxjinn approved these changes Feb 18, 2025
View reviewed changes
Copy link
Collaborator

@xxxjinn xxxjinn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

토큰 저장 방식은 해당 pr 머지 후에 바꾸시게 되는걸까요?!
제가 상대방이 받아보는 결과 페이지 로직 수정 후에 api 작업을 하려고 하는데, 통신을 위해서는 대부분 토큰이 필요해서 여쭤보는거에용!!

제가 상대방이 받아보는 결과 페이지 로직 수정 후에
(저도 이거 해야해서 절대 재촉이 아니라 단순 궁금증입니닷,,)

@gkfla668
Copy link
Member Author

토큰 저장 방식은 해당 pr 머지 후에 바꾸시게 되는걸까요?! 제가 상대방이 받아보는 결과 페이지 로직 수정 후에 api 작업을 하려고 하는데, 통신을 위해서는 대부분 토큰이 필요해서 여쭤보는거에용!!

제가 상대방이 받아보는 결과 페이지 로직 수정 후에
(저도 이거 해야해서 절대 재촉이 아니라 단순 궁금증입니닷,,)

음 일단 (MVP) 로컬 스토리지에 저장해서 가져오는 방식으로 하려고 했는데 매번 로컬스토리지에서 불러와야 하니까 그냥 전역 상태로 관리할까ㅛㅇ.. ??

@xxxjinn
Copy link
Collaborator

xxxjinn commented Feb 18, 2025

음 일단 (MVP) 로컬 스토리지에 저장해서 가져오는 방식으로 하려고 했는데 매번 로컬스토리지에서 불러와야 하니까 그냥 전역 상태로 관리할까ㅛㅇ.. ??

아핫!!! 아뇨아뇨 mvp로는 로컬스토리지에 저장해도 괜찮을 것 같아요,,, 다른 할 일도 있으니...🥹🥹 고생많으셨습니다!

@gkfla668 gkfla668 merged commit 0a1b759 into dev Feb 18, 2025
1 check passed
@gkfla668 gkfla668 deleted the feat/login branch February 18, 2025 13:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xxxjinn xxxjinn xxxjinn approved these changes

Assignees

@gkfla668 gkfla668

Labels
📭 API API 서버 통신 ✨ Feature 기능 개발
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Feat] 카카오 소셜 로그인 기능 구현
2 participants
@gkfla668 @xxxjinn